<#assign contextPath=request.getContextPath()/>
<script type="text/javascript" src="${contextPath}/lib/jquery/jquery-3.1.1.min.js" charset="UTF-8"></script>
<script>

    $(function () {
        // alert("我被执行了")
        //打开网页默认执行的方法，只要你打开网页就执行
        //none
        $("#loading").hide();
    })

    function clickA() {
        var element = document.getElementById("name");
        element.value = "我是js设置的值";
        $("#name").val("我是jquery设置的值");
        alert($("#name").val())

        alert($("#span").text())

        //id选择器，我们用id选择器就行了
        $("#span").text("span设置文本完成")

        //class选择器
        $(".a").val("abc")

        //标签选择器
        $("input").val("input设置的值")

        //属性选择
        $("[class]").val("属性选择器设置的值")

        $("[class='b']").val("属性选择器设置的值BBB")

        $("[class='c'][alt='生日']").val("生日")
    }

    function showOrHide() {
        // $("#span").val("你要输入的值")
        // document.getElementById("span").value="你要输入的值";
        // driver.findElementById("span").sendKey("你要输入的值")

        // StringBuffer stringBuffer=new StringBuffer()
        //stringBuffer ==$("#span")
        //append ==append
        //选择器 ==定位，定位到那个标签上

        var display = $("#span").css("display");
        if (display == "none") {
            $("#span").show()
        } else (
                $("#span").hide()
        )
        $("#div").append("明星")
        //inline
        //none

        alert($("#span").attr("alt"));
        $("#span").attr("alt", "小象")
    }

    function runTest() {
        $("#runTestButton").attr("disabled", "true");
    }

    function foreachDiv() {
        var array = ["a", "b", "C", "d"];
        for (var i = 0; i < array.length; i++) {
            // alert(array[i]);
        }
        array.forEach(function (element, index) {
            // alert(element);
        })
        $(".div").each(function () {
            //第一次遍历的时候 ==div1
            //第二次遍历的时候 ==div2
            $(this) == $("#div1")
            // alert($(this).text())
        })
        var abc;
        if (typeof(abc) == "undefined" || null == abc) {
            alert("undefined")
        }
    }

    function jsonFormat() {
        var user = {}; //java User user =new User();
        user.name = "希白";// user.setName("希白")
        user.age = 18;// user.setAge(18);
        //在js里面把对象转成json字符串
        var jsonStr = JSON.stringify(user);
        alert(jsonStr);
        //json字符串转成对象
        var obj = JSON.parse(jsonStr);
        alert(obj.name);
    }

    function getUser() {
        var url = "${contextPath}/jqueryController/getUserJson";
        $.get(url, function (data, status) {
            var th ="<tr><th>姓名</th><th>城市</th></tr>";
            $("#userTable").append(th);
            data.forEach(function (user, index) {
                var userName =user.userName;
                var city =user.city;
                $("#userTable").append("<tr><td>"+userName+"</td><td>"+city+"</td></tr>");
            });
            // alert(status);
        })
    }

    function postUser() {
        var url = "${contextPath}/jqueryController/postUser";
        var user={};
        user.userName="妞妞";
        user.city ="深圳";
        $.post(url,user,function(data,status){
            alert(data.msg)
        })
    }

    function ajaxUser() {
        var url = "${contextPath}/jqueryController/postUser";
        var username =$("#userName").val();
        var city =$("#city").val();
        var user={};
        user.userName="妞妞";
        user.city ="深圳";
        $.ajax({
            type:"post",
            url:url,
            dataType: "json",
            data:$("form").serialize(),
            beforeSend: function () {
                $("#loading").show();
            },
            afterSend:function(){

            },
            success: function (result) {
                $("#loading").hide();
                // alert(result.msg)?
            },
            error: function (resultError){
                alert(resultError)
                $("#loading").hide();
            }
        })
    }
    var user= {
        setUserName: function (userName) {
            alert(userName)
        },
        setAge: function (age) {
            alert(age)
        }
    }
    // user.setUserName("abcd");
    // user.setAge(18);

    function getCheckBoxChecked() {
        var str="";
        $("input[name='codeType']").each(function(){
            if($(this).is(":checked"))
            {
                str += "——" + $(this).val();
            }
        });
        // return str;
        alert(str);
    }
    function setCheckBox(value) {
        var list=["神经网络","深度学习"];
        // list.forEach(function(value){
            $("input:checkbox[name='codeType'][value="+value+"]").attr('checked','true')
        // })

    }

    var meter;
    function myrefresh() {
        meter=setTimeout('myrefresh()', 3000); //指定5秒刷新一次
        alert("定时刷新")
    }
    function clearRefresh() {
        clearTimeout(meter);
    }
</script>
<div id="div">
    <span id="span" alt="希白">写上看见我了吗</span>
</div>
<input type="button" value="是否显示" onclick="showOrHide()">
<#--有一个按钮，运行测试webdriver,在执行过程中你可以停止，但是不能点多次执行-->
<input id="runTestButton" type="button" value="运行测试" onclick="runTest()">
<div id="div1" class="div">我是第一个div</div>
<div id="div2" class="div">我是第二个div</div>
<div id="div3" class="div">我是第三个div</div>
<div id="div4" class="div">我是第四个div</div>
<input type="button" value="遍历div" onclick="foreachDiv()">
<input type="button" value="json" onclick="jsonFormat()">
<input type="button" value="getUser" onclick="getUser()">
<input type="button" value="postUser" onclick="postUser()">
</br></br>
<input type="button" value="ajaxUser" onclick="ajaxUser()">
<input type="button" value="getCheckBoxCheckd" onclick="getCheckBoxChecked()">
<input type="button" value="setCheckBox" onclick="setCheckBox('深度学习')">
<input type="button" value="开始定时刷新" onclick="myrefresh()">
<input type="button" value="关闭定时刷新" onclick="clearRefresh()">
<img id="loading" src="${contextPath}/pic/wait.jpg" style="margin-left: 35%;margin-top: 5%">
<table border="1" id="userTable" style="width: 50%;height: auto">

</table>

<form>
   姓名: <input type="text" name="userName" id="userName">
   城市 <input type="text" name="city" id="city">
    代码:
    <input type="checkbox" value="java" name="codeType">java
    <input type="checkbox" value="神经网络" name="codeType">神经网络
    <input type="checkbox" value="深度学习" name="codeType">深度学习
</form>
